<template>
    <div>
        <commpVxeTable
        :key="reCommpVxeTable"
        :config="dataTableConfig"
        :columns="columnsVxe"
        :formItem="formItem"
        @checkboxChange="checkboxChange"
        ref="administrativeOffice"
        @searchEvent="searchEvent"
        @resetEvent="resetEvent"
        >
        <template v-slot:externalOperations="{data}"  >
            <vxe-form-item>
                <template>
                    <a-upload :showUploadList="false" :beforeUpload="beforeUpload" action="" @change="leadingInClick($event)">
                        <a-button class="blue-btn" type="primary" icon="upload">上传</a-button>
                    </a-upload>
                </template>
            </vxe-form-item>
        </template>
        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
            <a-form layout="inline" class="search-form" >
                <a-form-item>
                    <a-button class="red-btn" type="primary" @click="delClick(row)" icon="delete">删除</a-button>
                </a-form-item>
              </a-form>
        </template>
        </commpVxeTable>
    </div>
</template>
<script>
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import { fjupload,deleteBatch, } from './service/index.js'
export default {
  components: {
    commpVxeTable,
  },
  props:{},
  data() {
    return {
      reCommpVxeTable: '',
      dataTableConfig: {
        api: assessCheckApi.list,
        rowId: 'id',
        urlType: true,
        paramet:{
        }
      },
      formItem: [
        {
          label: '文件名称',
          model: 'fmc',
        },
      ],
      columnsVxe: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '文件名称',
          field: 'fmc',
        },{
          title: '文件类型',
          field: 'flx',
        },{
          title: '操作',
          field: 'id',
          width: 100,
          slots: {
          // 使用插槽模板渲染
            default: 'operation_btn',
          },
        }
      ],
      idList: [],
      passObj: {},
    }
  },
  methods: {
    // 勾选
    checkboxChange(val){
      //console.log('已选择',val)
      this.idList = []
      if(val.length){
        val.forEach(item => {
            this.idList.push(item.id)
        });
      }
    },
    // 搜索
    searchEvent(){
      this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
      }
      //console.log(this.dataTableConfig.paramet)
    },
    // 重置
    resetEvent(){
      this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
      }
    },
    cancel(){},
    // 弹窗提交成功
    success(){
      // 刷新表格 清空id数组
      this.$refs.administrativeOffice.searchEvent()
      this.idList = []
    },
    beforeUpload(e){
        return false
    },
    leadingInClick({file}){//上传
        var that = this
        if(typeof file.uid !== 'undefined') {
            const fileData = new FormData();
            fileData.append("file",file);
            fjupload(fileData).then(res => {
                if(res.code !== 200){
                    that.reCommpVxeTable = Date.now()
                    that.$message.warning(res.message)
                }else{
                    that.$message.success(res.message)
                }
            })
        }
    },
    delClick(){},
  },
}
</script>
